{% extends "home/base.html" %}
{% block more2 %} class="active" {% endblock %}
{% block page_title %} 排行榜多维度分析 {% endblock %}
{% block content %}
<div class="col-lg-12">
    <div class="card">
        <div class="card-header">
            <h6 class="card-title">景点评论数排名</h6>
        </div>
        <!-- 引入 echarts 主库 -->
        <div class="card-body">
            <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
            <!-- <div id="hot_type" style="width:auto;height:auto"></div> -->
            <div id="hot_type" style="width:100%;height:600px"></div>
            <script>
            //    import * as echarts from 'echarts';

var chartDom = document.getElementById('hot_type');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Funnel'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  legend: {
    data: ['上海迪士尼度假区', '故宫博物院', '东方明珠', '秦始皇帝陵博物院', '成都大熊猫繁育研究基地']
  },
  series: [
    {
      name: '排名漏斗图',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside'
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: [
        { value: 219294, name: '上海迪士尼度假区' },
        { value: 136156, name: '故宫博物院' },
        { value: 134673, name: '东方明珠' },
        { value: 85866, name: '秦始皇帝陵博物院' },
        { value: 62695, name: '成都大熊猫繁育研究基地' }
      ]
    }
  ]
};

option && myChart.setOption(option);

            </script>
        </div>
    </div>
    
</div>

    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title">景点评分排名</h6>
            </div>
            <!-- 引入 echarts 主库 -->
            <div class="card-body">
                <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
                <script src="https://code.hcharts.cn/highcharts/highcharts.js"></script>
                <script src="https://code.hcharts.cn/highcharts/modules/exporting.js"></script>
                <script src="https://code.hcharts.cn/plugins/zh_cn.js"></script>
                <div id="hot_time" style="width:100%;height:600px"></div>
                <script>
                    var to_se_data = {{ to_se_data|safe }};
                   var chart = Highcharts.chart('hot_time', {
	chart: {
		zoomType: 'xy'
	},
	title: {
		text: '热度和评论评分前十'
	},
	subtitle: {
		text: '综合计算'
	},
	xAxis: [{
		categories: to_se_data.xdata,
		crosshair: true
	}],
	yAxis: [{ // Primary yAxis
		labels: {
			format: '{value}',
			style: {
				color: Highcharts.getOptions().colors[1]
			}
		},
		title: {
			text: '热度',
			style: {
				color: Highcharts.getOptions().colors[1]
			}
		}
	}, { // Secondary yAxis
		title: {
			text: '评论打分',
			style: {
				color: Highcharts.getOptions().colors[0]
			}
		},
		labels: {
			format: '{value} ',
			style: {
				color: Highcharts.getOptions().colors[0]
			}
		},
		opposite: true
	}],
	tooltip: {
		shared: true
	},
	legend: {
		layout: 'vertical',
		align: 'left',
		x: 120,
		verticalAlign: 'top',
		y: 100,
		floating: true,
		backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
	},
	series: [{
		name: '评论评分',
		type: 'column',
		yAxis: 1,
		data: to_se_data.y2data,

	}, {
		name: '热度评分',
		type: 'spline',
		data: to_se_data.ydata,

	}]
});

                    // option && myChart.setOption(option);
                </script>
            </div>
        </div>
    </div>
      
{% endblock %}